<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!--服务器不可用-->
		<div id="app">
			<input type="text" id="" value="Name" v-model="name"/>
			<input type="button" id="" value="add" @click="add()" />
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>

				<tr v-for="item in list" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.ctime}}</td>
					<td><a href="" @click.prevent="del(item.id)">删除</a></td>
				</tr>
				<script type="text/javascript">
					new Vue({
						el:"#app",
						data:{
							name:"",
							list:[
								{id:1,name:"五菱宏光",ctime:new Date()},
								{id:2,name:"众泰",ctime:new Date()}	
							]
						}, 
						created(){
								this.getAllList()
						},
						methods:{							
							add(){
								this.$http.post("http://vue.studyit.io/api/addproduct",{name:this.name},{emulateJSON:true}).then(result=>{
									if(result.body.status===0){
										this.getAllList()
										this.name=""
									}else{
										alert("添加失败！")
									}
								})
							},
							getAllList(){
								this.$http.get('ajax_info.txt').then(result=>{
									if(result.status===0)
									{
										this.list=result.message
									}
									else{
										alert("数据获取失败！")
									}
								})
							},
							del(id){
								this.$http.get("http:vue.studyit.io/api/delproduct/"+id).then(result=>{
									if(resilt.body.status===0){
										this.getAllList()
									}else{
										alert("删除失败！")
									}
								})
							}
						}
					})
				</script>
			</table>
		</div>
	</body>

</html>